@import './variables';

//reset
* {
	box-sizing: border-box;
	outline: none;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

html {
	font-size: 13px;
}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	// sans-serif 非衬线字体族
	line-height: 1.2em;
	background-color: #f1f1f1;
	-webkit-font-smoothing: antialiased;
}

a {
	color: #999;
	text-decoration: none;
}

// 宽高
.w-100 {
	width: 100%;
}

.h-100 {
	height: 100%;
}

// 颜色
// 将color生成助手类
// $colors相当于数组，需要按键值对循环
@each $colorKey, $color in $colors {
	.text-#{$colorKey} {
		color: $color;
	}

	.bg-#{$colorKey} {
		background-color: $color;
	}
}

//text-align
//用法：.text-left{text-align:left}
@each $var in (left, center, right) {
	.text-#{$var} {
		text-align: $var !important;
	}
}

// font-size
@each $sizeKey, $size in $font-sizes {
	.fs-#{$sizeKey} {
		font-size: $size * $base-font-size;
	}
}

//flex
// 用法：
// .jc-center{justify-content:center} .ai-center{align-items:cemter}
// .d-flex .jc-center .ai-center => { display:flex;justify-content:center;align-items:cemter}
// 使用flex布局
.d-flex {
	display: flex;
}

@each $key, $value in $flex-jc {
	.jc-#{$key} {
		justify-content: $value;
	}
}

@each $key, $value in $flex-ai {
	.ai-#{$key} {
		align-items: $value;
	}
}

// 常用flex工具类
.flex-column {
	flex-direction: column;
}

.flex-1 {
	flex: 1; // 简写：表示grow,shrink都是1
}

.flex-grow-1 {
	flex-grow: 1;
}

.flex-order {
	order: -1;
}

.flex-wrap {
	flex-wrap: wrap;
}

// type:m,p === directi:t/l/b/r === size:0/1/2/3/4/5  => mt-1
// m-0 => margin:0 ,mx-0 => margin-left/right:0
@each $typeKey, $type in $spacing-types {
	@each $directionKey, $direction in $spacing-directions {
		@each $sizeKey, $size in $spacing-sizes {
			// .mt-1{ margin-top:0.25rem}
			.#{$typeKey}#{$directionKey}-#{$sizeKey} {
				#{$type}-#{$direction}: $size * $spacing-base-size;
			}

			// m-0:{margin:0}
			.#{$typeKey}-#{$sizeKey} {
				#{$type}: $size * $spacing-base-size;
			}

			// mx-1 => margin-left/right{0.25rem}
			.#{$typeKey}x-#{$sizeKey} {
				#{$type}-left: $size * $spacing-base-size;
				#{$type}-right: $size * $spacing-base-size;
			}

			// my-1 => margin-top/bottom{0.25rem}
			.#{$typeKey}y-#{$sizeKey} {
				#{$type}-top: $size * $spacing-base-size;
				#{$type}-bottom: $size * $spacing-base-size;
			}
		}
	}
}

// btn公共样式
.btn {
	border: none;
	border-radius: 0.1538rem;
	font-size: map-get($font-sizes, 'sm') * $base-font-size;
	padding: 0.3rem 0.6rem;
}

// nav导航栏样式
.nav {
	@extend .d-flex;
	.nav-item {
		padding-bottom: 0.2308rem;
		border-bottom: 0.2308rem solid transparent;
		&.active {
			color: map-get($colors, 'primary');
			border-bottom: 0.2308rem solid map-get($colors, 'primary');
		}
	}

	&.nav-inverse {
		.nav-item {
			color: map-get($colors, 'white');
			border-bottom: 0.2308rem solid transparent;
			&.active {
				color: map-get($colors, 'white');
				border-bottom: 0.2308rem solid map-get($colors, 'white');
			}
		}
	}
}

// sprite精灵图定位样式
.sprite {
	background: url(../sprite.png) no-repeat 0 0;
	background-size: 28.8462rem;
	display: inline-block;
}
.sprite-logo {
	width: 2.3077rem;
	height: 2.3077rem;
	background-position: 0 72.588%;
}
// 首页宫格
.sprite- {
	width: 1.7692rem;
	height: 1.5385rem;
	#{news} {
		background-position: 63.546% 15.517%;
	}
	#{story} {
		background-position: 90.483% 15.614%;
	}
	#{shop} {
		width: 1.4615rem;
		height: 1.6923rem;
		background-position: 36.746% 0.924%;
	}
	#{map} {
		width: 1.5385rem;
		height: 1.5385rem;
		background-position: 10.408% 15.517%;
	}
	#{newperson} {
		width: 1.5385rem;
    height: 1.6154rem;
    background-position: 89.733% 1.266%;
	}
}
